<template>
  <el-row :gutter="40">
    <el-col :xs="12" :sm="12" :lg="6">
      <div class="card-panel" @click="handleSetLineChartData(panelItem[0])">
        <div class="card-panel-icon">
          <svg-icon :icon-class="panelItem[0]" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">{{ panelData[panelItem[0]] }}</div>
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6">
      <div class="card-panel" @click="handleSetLineChartData(panelItem[1])">
        <div class="card-panel-icon">
          <svg-icon :iconClass="panelItem[1]" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">{{ panelData[panelItem[1]] }}</div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  // 接收传递过来的panelGroup名字数组
  props: ["panelData"],
  data() {
    return {
      panelItem: [],
    };
  },
  beforeMount() {
    for (let k in this.panelData) {
      this.panelItem.push(k);
    }
  },
  methods: {
    handleSetLineChartData(panel_item) {
      this.$emit("handleSetLineChartData", panel_item);
    },
  },
};
</script>

<style scoped>
.el-row {
  background-color: #f0f2f5;
  margin-bottom: 34px;
}
.card-panel {
  display: block;
  cursor: pointer;
  /* margin-left: 30px; */
  /* 清除浮动 */
  overflow: hidden;
  color: #666;
  border-radius: 5px;
  background: #fff;
}
.card-panel-icon {
  float: left;
  font-size: 48px;
  margin: 5px 0 0 14px;
  padding: 16px;
}
.card-panel-description {
  float: right;
  font-weight: bold;
  margin: 55px 0;
  margin-right: 14px;
}
.card-panel-text {
  line-height: 18px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 20px;
  /* margin-bottom: 12px; */
}
</style>